<!--
 * @description 组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
-->
<template>
	<view class="pure-textarea" :class="_classes" :style="_styles">
		<textarea
			class="pure-textarea__textarea"
			:value="modelValue"
			:placeholder="$attrs.placeholder"
			:placeholder-style="
				$attrs.placeholderStyle || $attrs['placeholder-style']
			"
			:placeholder-class="
				$attrs.placeholderClass || $attrs['placeholder-class']
			"
			:maxlength="$attrs.maxlength"
			:focus="$attrs.focus"
			:auto-focus="$attrs.autoFocus || $attrs['auto-focus']"
			:auto-height="$attrs.autoHeight || $attrs['auto-height']"
			:fixed="$attrs.fixed"
			:cursor-spacing="$attrs.cursorSpacing || $attrs['cursor-spacing']"
			:cursor="$attrs.cursor"
			:cursor-color="$attrs.cursorColor || $attrs['cursor-color']"
			:confirm-type="$attrs.confirmType || $attrs['confirm-type']"
			:confirm-hold="$attrs.confirmHold || $attrs['confirm-hold']"
			:show-confirm-bar="
				$attrs.showConfirmBar || $attrs['show-confirm-bar']
			"
			:selection-start="
				$attrs.selectionStart || $attrs['selection-start']
			"
			:selection-end="$attrs.selectionEnd || $attrs['selection-end']"
			:adjust-position="
				$attrs.adjustPosition || $attrs['adjust-position']
			"
			:disable-default-padding="
				$attrs.disableDefaultPadding ||
				$attrs['disable-default-padding']
			"
			:hold-keyboard="$attrs.holdKeyboard || $attrs['hold-keyboard']"
			:auto-blur="$attrs.autoBlur || $attrs['auto-blur']"
			:ignoreCompositionEvent="
				$attrs.ignoreCompositionEvent ||
				$attrs['ignore-composition-event']
			"
			:inputmode="$attrs.inputmode || $attrs['inputmode']"
			@focus="onFocus"
			@input="onInput"
			@blur="onBlur"
			@confirm="onConfirm"
			@keyboardheightchange="onKeyboardheightchange"
			@linechange="onLinechange"
		/>
		<view class="pure-textarea__footer">
			<view class="pure-textarea__total" v-if="showTotal">
				{{ current }}/{{ total }}
			</view>
		</view>
	</view>
</template>

<script>
import commonComponentOptions from "../../config/common-component-options";
export default {
	options: commonComponentOptions,
};
</script>

<script setup>
import { ref, computed, inject, useAttrs } from "vue";
import props from "./props";

// **************************************************************************************************************
// * Refs
// **************************************************************************************************************

// **************************************************************************************************************
// * Options
// **************************************************************************************************************
defineOptions(commonComponentOptions);

// **************************************************************************************************************
// * Props
// **************************************************************************************************************
const _props = defineProps(props);

// **************************************************************************************************************
// * Attrs
// **************************************************************************************************************
const _attrs = useAttrs();

// **************************************************************************************************************
// * Injects
// **************************************************************************************************************
const PureFormItemOnBlur = inject("PureFormItemOnBlur", null);
const PureFormItemOnChange = inject("PureFormItemOnChange", null);

// **************************************************************************************************************
// * Emits
// **************************************************************************************************************
const _emits = defineEmits([
	"input",
	"focus",
	"blur",
	"confirm",
	"keyboardheightchange",
	"update:modelValue",
	"clear",
	"linechange",
]);

// **************************************************************************************************************
// * Classes
// **************************************************************************************************************
const _classes = computed(() => {
	const array = [];

	// 禁用
	if (_props.disabled) {
		array.push("pure-textarea--disabled");
	}

	return array;
});

// **************************************************************************************************************
// * Styles
// **************************************************************************************************************
const _styles = computed(() => {
	const array = [];
	return array;
});

// **************************************************************************************************************
// * Computed
// **************************************************************************************************************
// 当前字数
const current = computed(() => {
	return _props.modelValue?.length || 0;
});

// 总字数
const total = computed(() => {
	if (_attrs?.maxlength === undefined || _attrs?.maxlength === null)
		return 140;
	const maxlength = Number(_attrs?.maxlength);
	if (maxlength === -1) return "字数";
	return maxlength;
});

// **************************************************************************************************************
// * Functions
// **************************************************************************************************************
// 获取焦点事件
function onFocus(e) {
	_emits("focus", e);
}

// 失去焦点事件
function onBlur(e) {
	_emits("blur", e);
	PureFormItemOnBlur?.();
}

// 输入事件
function onInput(e) {
	const value = formatValue(e.detail.value);
	_emits("update:modelValue", value);
	_emits("input", e);
	if (_props?.modelValue !== e.detail.value) {
		PureFormItemOnChange?.();
	}
}

// 确认事件
function onConfirm(e) {
	_emits("confirm", e);
}

// 键盘高度变化事件
function onKeyboardheightchange(e) {
	_emits("keyboardheightchange", e);
}

// 换行事件
function onLinechange(e) {
	_emits("linechange", e);
}

// 格式化值
function formatValue(value) {
	return value;
}

// 清空
function handleClear() {
	_emits("update:modelValue", "");
	_emits("clear");
}
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>
